<template>
  <div class="home">
    <main-nav-bar />
    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card">
      <el-carousel-item v-for="(item, index) in carouseList" :key="index">
        <img class="w-100 h-100" :src="item" alt />
      </el-carousel-item>
    </el-carousel>
    <!-- section1-->
    <titles>
      <!-- 标题 -->
      <h1 slot="h1">金牌保姆</h1>
      <!-- 内容-->
      <template v-slot:sectionBody>
        <div
          class="row row-cols-1 row-cols-md-2 row-cols-lg-3 d-flex justify-content-cneter aligin-items-center"
        >
          <!-- 卡片组件 -->
          <div
            class="col mt-5 d-flex justify-content-center align-items-center "
            v-for="(item, index) in carInfoList"
            :key="index"
          >
            <a  style=" text-decoration: none;" @click="cardClick(item)">
              <card class="card_style">
                <img :src="item.img" slot="img" alt />
                <h5
                  class="card-title text-center fw-bold my-transition"
                  slot="card-title"
                >{{ item.name }}</h5>
                <div
                  class="card-text text-center fw-normal my-transition overflow"
                  slot="card-text"
                >{{ item.type }}</div>
              </card>
            </a>
          </div>
        </div>
      </template>
    </titles>
  </div>
</template>

<script>
import Titles from '@/components/Titles.vue'
import Card from '@/components/Card.vue'
import Login from '@/common/Login.vue'
import MainNavBar from '@/common/NavBar/MainNavBar.vue'
import formatDateTimes from '@/assets/Tools/date2.js'
import qs from 'qs'
export default {
  name: 'home',

  components: {
    Titles,
    Card,
    Login,
    MainNavBar,
  },
  data() {
    return {
      carInfoList: [], //卡片信息
      noticeList: [], // 公告
      carouseList: [
        'http://oss.yongyan0624.top/16410131039013622218279620112803.jpg?Expires=1956373104&OSSAccessKeyId=LTAI5tKYB2fEJgAnLtRjydfb&Signature=MWS8q06SpwzUgztGOq2w5e1yLyI%3D',
        'http://oss.yongyan0624.top/16410133818917416004059762449115.PNG?Expires=1956373382&OSSAccessKeyId=LTAI5tKYB2fEJgAnLtRjydfb&Signature=YvWNaPcEQV%2Bg0i6nuXsf47bGiZs%3D',
        'http://oss.yongyan0624.top/16410134248187089681925277782271.PNG?Expires=1956373424&OSSAccessKeyId=LTAI5tKYB2fEJgAnLtRjydfb&Signature=dyfqLbsMl3vqzGTFHAbMjjzXDj0%3D',
        'http://oss.yongyan0624.top/16410134538128224886360059630523.PNG?Expires=1956373453&OSSAccessKeyId=LTAI5tKYB2fEJgAnLtRjydfb&Signature=g2U96SOmZItePBY1EcoW6kW%2BcTE%3D',
      ], //轮播图图片
    }
  },
  created() {
    this.getCardInfoList()
  },
  filters: {
    // 发表时间格式化
    formatDate(val) {
      return formatDateTimes.formatDateTime(val)
    },
  },
  methods: {
    cardClick(item) {
      this.$router.push('/CardDetails/' + item.id)
    },
    async getCardInfoList() {
      const { data } = await this.$http.get(
        '/nanny/list?' +
          qs.stringify({
            current: this.currentPage,
            size: this.pageSize,
          })
      )

      if (data.code == 200) {
        this.carInfoList = data.data.records
      }
    },
  },
}
</script>
<style lang="less" scoped>
.home {
  margin-top: 6.25rem;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__container {
  height: 25rem !important;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.login {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%);
}
.blockquote p {
  font-weight: 400 !important;
  font-size: 14px;
}
.blockquote p.content {
  font-size: 18px;
}
// 卡片
.card_style{
  width: 20.25rem !important;
  height: 20.25rem !important;
}
.card .log {
    width: 10.25rem !important;
    height: 10.25rem !important;
}
.card .log img {
    display: inline-block;
    width: 10rem !important;
    height: 10rem !important;
    }
</style>
